<template>
  <div id="app">
    <!-- 头部区域 -->
    <div class="register-header">
      <van-icon name="arrow-left"  color="white" @click="$router.go(-1)" size="30px" />
    </div>
    <!-- 注册的主体部分 -->
    <div class="register-body">
      <div class="register-body-top">
        <div> <img src="/img/shouji.png" alt=""> <input type="text" v-model="u_phone" placeholder="手机号"> </div>
        <div><img src="/img/mima.png" alt=""><input type="password" v-model="u_password" placeholder="密码"></div>
        <div><p> <router-link to="/login">去登陆</router-link> </p></div>  
      </div>
      <div>
        <button @click="register">
          注册
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        u_phone:'',
        u_password:''
      }
    },
    methods: {
      register(){
        if(this.u_phone==''||this.u_password==''){
          alert('用户名或者密码不能为空哦!')
          return
        }
        let formdata = `u_phone=${this.u_phone}&u_password=${this.u_password}`
        console.log(formdata);
        this.$axios.post('/users/register',formdata).then(res=>{
          console.log(res);
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
@import url('/css/reset.css');
@keyframes moveTop {
  0%{transform: translateY(100px);opacity: 0; }
  20%{transform: translateY(80px);opacity: 0.2;}
  50%{transform: translateY(50px);opacity: 0.5;}
  80%{transform: translateY(20px);opacity: 0.8;}
  100%{transform: translateY(0);opacity: 1;}
}
#app{
  input::-webkit-input-placeholder { 
    color:#999;
  }
  width: 100vw;
  height: 100vh;
  background: url('/img/register.jpg');
  background-size: cover;
  .register-header{
    width: 100vw;
    height: 4rem;
    display: flex;
    align-items: center;
    padding-left: .625rem;
    // background-color: white;
  }
  .register-body{
    width: 90vw;
    height: 75vw;
    margin: 8rem auto;
    border-radius: .625rem;
    animation: moveTop 2s linear;
    background-color: #fff;
    >div:nth-child(1){
      width: 100%;
      height: 65%;
      padding-top: 1.25rem;
      >div{
        width: 80vw;
        height: 15vw;
        border-radius: .3125rem;
        margin: 1.25rem auto;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: .625rem;
        img{
          width: 8vw;
        }
        input{
          width: 80vw;
          height: 95%;
          font-size: .9375rem;
        }
      }
      >div:nth-child(3){
        width: 100%;
        border: none;
        position: relative;
        top: -0.625rem;
        height: 1.8rem;
        display: flex;
        font-size: .9375rem;
        color: #F15522;
        padding-right: 2rem;
        align-items: center;
        justify-content: flex-end;
      }
    }
    >div:nth-child(2){
      width: 100%;
      height: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      button{
        width: 75vw;
        height: 75%;
        border-radius: .3125rem;
        font-size: .9375rem;
        color: white;
        background-color: #F15522;
      }
    }

  }
}
</style>